<template>
    <uni-transition mode-class="zoom-in" needLayout="true" :show="orderData" :duration="500">
        <view class="order_detail">
            <!-- Main Start -->
            <view class="flex pb-[30rpx]">
                <image
                    v-if="orderData.orderStatus === 0"
                    class="header-image"
                    src="/static/images/icon_pay.png"
                ></image>
                <image
                    v-if="orderData.orderStatus === 1 || orderData.orderStatus === 2"
                    class="header-image"
                    src="/static/images/icon_wait.png"
                ></image>
                <image
                    v-if="orderData.orderStatus === 3"
                    class="header-image"
                    src="/static/images/icon_success.png"
                ></image>
                <image
                    v-if="orderData.orderStatus === 4"
                    class="header-image"
                    src="@/static/images/icon_close.png"
                ></image>
                <text class="ml-[15rpx] text-white">{{ orderData.orderStatusName }}</text>
            </view>

            <!-- 地址卡片 -->
            <view class="card">
                <view class="card--header">
                    <view class="title text-black"
                        >{{ orderData.contact }} {{ orderData.mobile }}</view
                    >
                </view>
                <view class="text-sm text-muted">
                    {{ orderData.province }}
                    {{ orderData.city }}
                    {{ orderData.district }}
                    {{ orderData.address }}
                </view>
            </view>

            <!-- 商品卡片 -->
            <view class="card">
                <view class="goods-item">
                    <u-image
                        :src="orderData.orderGoods?.imageUrl"
                        width="160"
                        height="160"
                        border-radius="4"
                    ></u-image>
                    <view class="ml-[20rpx] mt-[4rpx]">
                        <view class="flex justify-between title">
                            <view class="goods-item--name truncate">{{
                                orderData.orderGoods?.goodsName
                            }}</view>
                            <text>x{{ orderData.orderGoods?.goodsNum }}</text>
                        </view>
                        <view class="mt-[24rpx]">
                            <price
                                :price="orderData.orderGoods?.goodsPrice"
                                :desc="orderData.orderGoods?.unitName"
                            ></price>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 上门时间 -->
            <view class="card normal text-base flex justify-between">
                <view>上门时间</view>
                <view>
                    {{ orderData.appointTime }} {{ orderData.weekDay }}
                    {{ orderData.appointTimeStartStr }}-{{ orderData.appointTimeEndStr }}
                </view>
            </view>

            <!-- 服务师傅 -->
            <template v-if="orderData?.staff?.id">
                <view class="card normal text-base flex justify-between">
                    <view>服务师傅</view>
                    <view>{{ orderData?.staff?.name }} {{ orderData?.staff?.mobile }}</view>
                </view>
            </template>

            <!-- 我的核销码 -->
            <template v-if="orderData.orderStatus === 2">
                <view class="card normal text-base">
                    <view class="">
                        <view>我的核销码</view>
                    </view>

                    <view class="pt-[40rpx] flex justify-center">
                        <qrcode
                            ref="qrcode"
                            uni="px"
                            :val="orderData?.verificationCode"
                            :size="118 * 2"
                            :showLoading="false"
                        />
                    </view>

                    <view class="text-center p-[20rpx]">
                        核销码：{{ orderData.verificationCode }}
                    </view>
                </view>
            </template>

            <!-- 服务金额 -->
            <view class="card normal text-base">
                <view class="flex justify-between">
                    <view>服务金额</view>
                    <view>¥{{ orderData.orderAmount }}</view>
                </view>
                <view class="mt-[30rpx] flex justify-between">
                    <view>实付金额</view>
                    <view class="text-primary">¥{{ orderData.totalAmount }}</view>
                </view>
            </view>

            <!-- 备注 -->
            <view class="card flex justify-between flex-wrap normal text-base">
                <view>备注</view>
                <view style="width: 100%; word-wrap: break-word">{{ orderData.userRemark }}</view>
            </view>

            <!-- 订单信息 -->
            <view class="card normal text-base">
                <view class="flex justify-between">
                    <view>订单编号</view>
                    <view>{{ orderData.sn }}</view>
                </view>
                <view class="mt-[30rpx] flex justify-between">
                    <view>支付方式</view>
                    <view>{{ orderData.payWayName }}</view>
                </view>
                <view class="mt-[30rpx] flex justify-between">
                    <view>下单时间</view>
                    <view>{{ orderData.createTime }}</view>
                </view>
                <view class="mt-[30rpx] flex justify-between" v-if="orderData.orderStatus === 3">
                    <view>完成时间</view>
                    <view>{{ orderData.finishTime }}</view>
                </view>
                <view class="mt-[30rpx] flex justify-between" v-if="orderData.orderStatus === 4">
                    <view>关闭时间</view>
                    <view>{{ orderData.cancelTime }}</view>
                </view>
            </view>
            <!-- Main End -->
        </view>
    </uni-transition>

    <!-- Footer Start -->
    <view class="footer flex justify-end" v-if="orderData.orderStatus != 4">
        <order-footer
            :orderId="orderData.id"
            :orderStatus="orderData.orderStatus"
            :cancel="orderData.cancelBtn"
            :del="orderData.delBtn"
            :evaluate="orderData.commentBtn"
            :contact="orderData.contactBtn"
            :pay="orderData.payBtn"
            :mobile="orderData?.staff?.mobile"
            :type="2"
            @refresh="initOrderDetail"
        />
    </view>
    <!-- Footer End -->

    <!-- Component 支付 -->
    <payment
        v-if="payState.showPay || payState.showCheck"
        v-model:show="payState.showPay"
        v-model:show-check="payState.showCheck"
        :order-id="payState.orderId"
        :order_amount="orderData?.totalAmount"
        :from="payState.from"
        :redirect="payState.redirect"
        @success="handlePayResult"
        @close="handlePayResult"
        @fail="handlePayResult"
    />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app'
import { apiOrderDetail } from '@/api/order'
import Price from '@/components/price/index.vue'
import OrderFooter from '@/components/order-footer/index.vue'
import qrcode from '@/components/qrcode/index.vue'

const orderData = ref<any>({
    order_amount: '',
    total_amount: '',
    total_goods_price: ''
})
const payState = reactive({
    orderId: '',
    from: '',
    showPay: false,
    showCheck: false,
    redirect: '/pages/order_detail/index'
})
const orderId = ref<number | string>('')
// 初始化订单详情
const initOrderDetail = async (): Promise<void> => {
    orderData.value = await apiOrderDetail({ id: orderId.value })
}

const handlePayResult = async () => {
    payState.showPay = false
    payState.showCheck = false
    initOrderDetail()
}

onShow(() => {
    uni.$on('payment', (param: any) => {
        payState.orderId = param.order_id
        payState.from = param.from
        payState.showPay = true
        payState.redirect =
            payState.redirect + `?order_id=${param.order_id}&from=${param.from}&checkPay=true`
    })
})

onLoad((options: any) => {
    // 获取订单ID
    orderId.value = parseInt(options?.id)

    // 初始化订单信息
    initOrderDetail()

    // h5支付用于弹起手动确认支付弹窗
    if (options?.checkPay) {
        payState.orderId = options.order_id
        payState.from = options.from
        payState.showCheck = true
        return
    }
})

onUnload(() => {
    uni.$off(['payment'])
    payState.showPay = false
})

onHide(() => {
    uni.$off(['payment'])
})
</script>

<style lang="scss">
.order_detail {
    height: 100%;
    padding: 30rpx 24rpx;
    padding-bottom: 140rpx;
    background: linear-gradient(to bottom, #f36161 200rpx, transparent 0);

    .header-image {
        width: 44rpx;
        height: 44rpx;
    }

    .card {
        padding: 24rpx;
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 10rpx;

        &--header {
            padding-bottom: 20rpx;
        }
        .title {
            font-weight: 500;
            color: #666;
            font-size: 32rpx;
        }
    }

    .goods-item {
        display: flex;
        &--name {
            width: 430rpx;

            // line-1
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}
.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 108rpx;
    position: fixed;
    padding: 20rpx 30rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    background-color: #ffffff;
    box-shadow: 2rpx 2rpx 22rpx rgba($color: #000000, $alpha: 0.2);

    .btn {
        width: 320rpx;
    }
}
</style>
